<template>
  <div>
    <h1>{{ msg }}</h1>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="accountType" label="账目类型"></el-table-column>

      <el-table-column prop="accountDesc" label="账目描述"></el-table-column>

      <el-table-column prop="accountMoney" label="账目金额"></el-table-column>

      <el-table-column prop="createTime" label="日期"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'VueTest',
  data() {
    return {
      msg: '开心记账本',
      tableData: [],
    }
  },

  methods: {

    //加载列表数据
    loadTableData() {
      //发请求给后台
      this.$http.get("/account/getAllAccount", {}).then(response => {
        this.tableData = response.data.data;
        //打印数据在控制台
        console.log(this.tableData);
      });
    },

  },

  //钩子函数(页面初始化时，钩子函数就会被执行)
  mounted() {
    this.loadTableData();
  }

}
</script>

<style scoped>
</style>
